<template>
  <div>
    <userSearch :isshow-role="isshowRole" :label-list="labelList">
      <template #input>
        人员搜索: <el-input v-model.trim="userName" placeholder="请输入" class="search" />
      </template>
      <template #option>
        角色:  <el-select v-model="roleId" placeholder="请选择" class="select">
          <el-option v-for="item in labelList" :key="item.label" :label="item.label" :value="item.value" />
        </el-select>
      </template>
      <template #SearchBtn>
        <el-button class="btn" @click="searchUser">查询</el-button>
      </template>
    </userSearch>

    <userTableTask :table-list="tableList" :page="page" :total="+total" :total-page="+totalPage" @del="delRole" @edit="edit" @getRoleList="getRoleList" @addRole="addRole" />
    <addRole ref="addRole" :dialog-form-visible.sync="dialogFormVisible" />
  </div>
</template>

<script>
import userTableTask from './components/user-table-task.vue'
import addRole from './components/addRole.vue'
import userSearch from './components/user-search.vue'
import { getUserSearchApi, DelUserApi, getUserServiceApi } from '@/api/user'
export default {
  components: { userTableTask, addRole, userSearch },
  data() {
    return {
      tableList: [],

      page: {
        // 放置页码及相关数据
        pageIndex: 1,
        pageSize: 10
      },
      total: 0,
      totalPage: 0,
      tableData: {},
      dialogFormVisible: false,
      isshowRole: true,
      loading: false,
      roleId: '',
      userName: '',
      labelList:
      [{ label: '运营员', value: '2' },
        { label: '维修员', value: '3' }]
    }
  },
  created() {
    this.getRoleList()
  },
  methods: {
    // 获取列表数据
    async  getRoleList() {
      this.loading = true

      const { data: { currentPageRecords, totalCount, totalPage }} = await getUserServiceApi(this.page)

      this.tableList = currentPageRecords
      // console.log(currentPageRecords)
      this.total = totalCount
      this.totalPage = totalPage
      // 问题：如果一个页面的数据刚好删除完之后 会显示暂无数据 这时候要重新刷新页面显示上一页的数据才合理
      // 处理： 判断 总数是否大于0 且 row有长度
      if (totalCount > 0 && currentPageRecords.length === 0) {
        this.page.pageIndex--
        this.getRoleList()
      }
      this.loading = false
    },
    // 删除用户
    async delRole(id) {
      // 调用删除得接口
      // 重新获取数据
      await this.$confirm('是否删除该人员?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      await DelUserApi(id)
      this.getRoleList()
    },
    // 修改用户
    async edit(name) {
      this.dialogFormVisible = true
      const { data } = await getUserSearchApi({ userName: name })
      console.log(data)
      this.$refs.addRole.form = data.currentPageRecords[0]
    },
    // 新增角色
    addRole() {
      this.dialogFormVisible = true
    },
    // 搜索
    async searchUser() {
      // 如果 userName为空
      if (!this.userName) {
        const { data: { currentPageRecords, totalCount, totalPage }} = await getUserServiceApi({ roleId: this.roleId })
        this.tableList = currentPageRecords
        this.total = +totalCount
        this.totalPage = totalPage
      } else {
        const { data: { currentPageRecords, totalCount, totalPage }} = await getUserServiceApi({ userName: this.userName, roleId: this.roleId })
        this.total = +totalCount
        this.totalPage = totalPage
        this.tableList = currentPageRecords
      }
      // this.tableList = value
    }
  }
}
</script>

<style>

</style>

